<template>
  <div class="comparison-chart" style="width: 500px; height: 300px;">
    <!-- 标题区域 -->
    <div class="title-bar" style="background-color: #0f2035; color: #fff; padding: 10px 15px; border-radius: 8px 8px 0 0; font-size: 16px; font-weight: bold; text-align: center;">
      本日办件数与昨日同期分析
    </div>
    
    <!-- 内容区域 -->
    <div class="content" style="height: 220px; background-color: #0f2035; padding: 10px; border-radius: 0 0 8px 8px;">
      <div id="comparisonChart" style="width: 100%; height: 100%;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, onUnmounted } from 'vue';

export default {
  name: 'ComparisonChart',
  setup() {
    let comparisonChart = null;

    onMounted(() => {
      // 初始化对比图表
      const chartDom = document.getElementById('comparisonChart');
      if (chartDom) {
        comparisonChart = echarts.init(chartDom);
        
        const option = {
          backgroundColor: '#0f2035',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['本日', '昨日'],
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
            right: '10%',
            top: '10%'
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '15%',
            top: '20%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
            axisLabel: {
              color: '#fff',
              fontSize: 12
            },
            axisLine: {
              lineStyle: {
                color: '#38bdf8'
              }
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            max: 50,
            axisLabel: {
              color: '#fff',
              fontSize: 12
            },
            axisLine: {
              lineStyle: {
                color: '#38bdf8'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#38bdf8',
                opacity: 0.3
              }
            }
          },
          series: [
            {
              name: '本日',
              type: 'line',
              smooth: true,
              lineStyle: {
                color: '#e94c4c',
                width: 2
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#e94c4c' },
                  { offset: 1, color: '#e94c4c', opacity: 0.3 }
                ])
              },
              symbol: 'circle',
              symbolSize: 4,
              data: [5, 10, 15, 20, 25, 30, 35, 40, 35, 25, 15]
            },
            {
              name: '昨日',
              type: 'line',
              smooth: true,
              lineStyle: {
                color: '#47b8e0',
                width: 2
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#47b8e0' },
                  { offset: 1, color: '#47b8e0', opacity: 0.3 }
                ])
              },
              symbol: 'circle',
              symbolSize: 4,
              data: [10, 15, 20, 25, 30, 35, 40, 45, 40, 30, 20]
            }
          ]
        };
        
        comparisonChart.setOption(option);
      }

      // 添加窗口大小调整事件
      window.addEventListener('resize', () => {
        if (comparisonChart) {
          comparisonChart.resize();
        }
      });
    });

    onUnmounted(() => {
      // 组件销毁时释放资源
      if (comparisonChart) {
        comparisonChart.dispose();
      }
    });

    return {};
  }
};
</script>

<style scoped>
.comparison-chart {
  width: 500px;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
}

.title-bar {
  background-color: #0f2035;
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px 8px 0 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.content {
  height: 220px;
  background-color: #0f2035;
  padding: 10px;
  border-radius: 0 0 8px 8px;
}
</style>